<!--
 * @Author: lisong
 * @Date: 2023-04-13 16:10:48
 * @LastEditors: LiSong
 * @LastEditTime: 2024-09-12 17:22:53
 * @Description: 表单设计
-->
<template>
  <VFormDesigner class="rk-form-designer-container"
    ref="vfDesignerRef"
    :busiConfig="busiConfig"
    :enumsConfig="enumsConfig"
    :slotsConfig="slotsConfig"
    :axiosConfig="axiosConfig"
    :slotFieldList="slotFieldList"
    :designerConfig="designerConfig">
  </VFormDesigner>
</template>

<script setup name="FormDesignPanel">
import XEUtils, { isEmpty } from 'xe-utils';
import { defAxios } from '@/utils/http';
import { useUserStore } from '@/stores/modules';
import { EnumsDataPools } from '@/enums';
import { slotFieldList } from '@/components/designer/src/slots'

// const slotFieldList = [];

// 表单设计器
const props = defineProps({
  formJson: { type: [String, Object], default: '' },
});

const vfDesignerRef = ref();
watch(
  () => props.formJson,
  (newValue, oldValue) => {
    nextTick(() => {
      if (!isEmpty(newValue)) {
        vfDesignerRef.value.setFormJson(XEUtils.clone(newValue, true));
      } else {
        vfDesignerRef.value.clearDesigner();
      }
    });
  },
  { deep: true, immediate: true, once: true }
);

const busiConfig = ref({
  userInfo: useUserStore().userInfo,
  dataHouse: {},
});
const axiosConfig = ref({
  request: defAxios,
});
const enumsConfig = ref({
  dataPools: EnumsDataPools,
});
const slotsConfig = ref({
  dataPools: slotFieldList,
});
const designerConfig = ref({
  resetFormJson: true,
});
function getFormData() {
  const formJson = vfDesignerRef.value.getFormJson();
  const fieldWidgets = vfDesignerRef.value.getFieldWidgets();
  console.log('fieldWidgets', fieldWidgets)
  let slotJson = [];
  let formFileds = [];
  fieldWidgets.forEach((item) => {
    let fieldOptions = item.field.options;
    if (item.type === 'slot') {
      slotJson.push({
        id: item.field.id,
        key: item.field.key,
        value: item.name,
        label: fieldOptions.label,
      });
    } else if (['data-table'].includes(item.type)) {
      // 不做任何操作
    } else {
      const dataField = fieldOptions.dataField;
      if (dataField) {
        formFileds.push({
          code: item.name,
          field: dataField ? dataField.split('.')[1] : '',
          tableName: dataField ? dataField.split('.')[0] : '',
        });
      }
    }
  });
  return {
    formJson: formJson,
    slotJson: slotJson,
    formFileds: formFileds,
  };
}

defineExpose({
  getFormData,
});
</script>

<style lang="scss">
.rk-form-designer-container .form-widget-container {
	.el-tabs__nav-scroll {
		padding: 0 5px;
	}
	.el-tabs__content {
		padding: 15px;
	}
}
.v-from-dialog {
  padding: 0;
  .el-alert {
    border: none;
    border-radius: none;
  }
  .dialog-footer {
    padding: 15px;
    padding-top: 0;
  }
}
</style>
